<template>
  <div class="trauma-process">
    <el-form inline>
      <el-radio v-model="radioDate" label="1" @change="changeDate">
        <span style="margin-right: 5px;">指定日期</span>
        <el-form-item label="年份：">
          <el-date-picker
            v-model="year"
            type="year"
            value-format="yyyy"
            size="mini"
            :disabled="radioDate == 2"
            placeholder="选择年"
          />
        </el-form-item>
        <el-form-item label="季度：">
          <el-select v-model="quarter" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="第一季度" :value="1" />
            <el-option label="第二季度" :value="2" />
            <el-option label="第三季度" :value="3" />
            <el-option label="第四季度" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份：">
          <el-select v-model="month" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="一月" :value="1" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="二月" :value="2" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="三月" :value="3" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="四月" :value="4" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="五月" :value="5" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="六月" :value="6" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="七月" :value="7" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="八月" :value="8" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="九月" :value="9" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="十月" :value="10" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十一月" :value="11" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十二月" :value="12" :disabled="quarter != '' && quarter != '4'" />
          </el-select>
        </el-form-item>
      </el-radio>
      <el-radio v-model="radioDate" label="2" @change="changeDate">
        <span style="margin-right: 5px;">其他时间</span>
        <el-form-item label="">
          <el-date-picker
            v-model="monthRange"
            type="monthrange"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            size="mini"
            format="yyyy-MM"
            value-format="yyyy-MM"
            :disabled="radioDate == 1"
          />
        </el-form-item>
      </el-radio>
      <el-form-item label="">
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="trauma-process_content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>急救事件数量排名</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>已建档病例</div>
            <div>数据取值：</div>
            <div>1.取“MPDS”-“MPDS”所勾选的值</div>
            <div>2.按各个MPDS症状数量的排名，按数量从多到少，从左到右排列，展示数值</div>
            <div>3.按筛选时间统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div id="getMPDSQtyRanking" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>急救措施开展情况</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>已建档病例</div>
            <div>数据取值：</div>
            <div>1.取“创伤抢救”-“抢救措施”所勾选的值</div>
            <div>2.计算各类措施数量及其在总量中所占比例</div>
            <div>3.按月统计，可能会有重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年"</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div id="getFirstAidMeasureQty" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {
  getMPDSQtyRanking,
  getFirstAidMeasureQty
} from '@/api/statistical/statisticTruma'
export default {
  data() {
    return {
      radioDate: '1',
      year: '',
      quarter: '',
      month: '',
      monthRange: []
    }
  },
  mounted() {
    this.initApi()
  },
  methods: {
    search() {
      this.initApi()
    },
    reset() {
      this.radioDate = '1'
      this.year = ''
      this.quarter = ''
      this.month = ''
      this.monthRange = []
      this.initApi()
    },
    changeDate(val) {
      console.log(val)
      if (val === 1) {
        this.monthRange = []
      } else if (val ===
                2) {
        this.year = ''
        this.quarter = ''
        this.month = ''
      }
    },
    initApi() {
      this.trumaGetMPDSQtyRanking()
      this.trumaGetFirstAidMeasureQty()
    },
    notHaveData(chart) {
      chart.showLoading({
        text: '暂无数据',
        fontSize: 18,
        left: 'center',
        color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
        textColor: '#000', // 文字颜色
        maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      })
    },
    trumaGetMPDSQtyRanking() {
      const chartDom = document.getElementById('getMPDSQtyRanking')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getMPDSQtyRanking({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        console.log(res.data)
        const mpdsName_list = []
        const qtyMPDS_list = []
        res.data.mpdsQtyRanking.forEach(el => {
          mpdsName_list.push(el.mpdsName)
          qtyMPDS_list.push(el.qtyMPDS ? el.qtyMPDS : 0)
        })
        const option = {
          color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 60
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: mpdsName_list,
            axisLabel: { // 设置x轴的字
              show: true,
              interval: 0, // 使x轴横坐标全部显示
              textStyle: {// x轴字体样式
                margin: 15
              }
            }
          },
          yAxis: {
            name: '例',
            type: 'value'
          },
          series: [{
            // name: '出车次数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: qtyMPDS_list
          }
          ]
        }
        myChart.setOption(option)
      })
    },
    trumaGetFirstAidMeasureQty() {
      const chartDom = document.getElementById('getFirstAidMeasureQty')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getFirstAidMeasureQty({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        if (res.data.total === 0) {
          this.notHaveData(myChart)
          return
        }

        const closedThoracicDrainage = res.data.subtotalFirstAidMeasure.closedThoracicDrainage
        const artificialAirway = res.data.subtotalFirstAidMeasure.artificialAirway
        const bloodTransfusion = res.data.subtotalFirstAidMeasure.bloodTransfusion
        const injuryControlSurgery = res.data.subtotalFirstAidMeasure.injuryControlSurgery
        const useRespirator = res.data.subtotalFirstAidMeasure.useRespirator
        const venousPassage = res.data.subtotalFirstAidMeasure.venousPassage
        const externalChestCompression = res.data.subtotalFirstAidMeasure.externalChestCompression

        const closedThoracicDrainage_rate = res.data.percentageFirstAidMeasure.closedThoracicDrainage
        const artificialAirway_rate = res.data.percentageFirstAidMeasure.artificialAirway
        const bloodTransfusion_rate = res.data.percentageFirstAidMeasure.bloodTransfusion
        const injuryControlSurgery_rate = res.data.percentageFirstAidMeasure.injuryControlSurgery
        const useRespirator_rate = res.data.percentageFirstAidMeasure.useRespirator
        const venousPassage_rate = res.data.percentageFirstAidMeasure.venousPassage
        const externalChestCompression_rate = res.data.percentageFirstAidMeasure.externalChestCompression

        const legendList = [
          { value: closedThoracicDrainage, name: '胸腔闭式引流', rate: closedThoracicDrainage_rate },
          { value: artificialAirway, name: '人工气道', rate: artificialAirway_rate },
          { value: bloodTransfusion, name: '输血', rate: bloodTransfusion_rate },
          { value: injuryControlSurgery, name: '损伤性控制手术', rate: injuryControlSurgery_rate },
          { value: useRespirator, name: '呼吸机', rate: useRespirator_rate },
          { value: venousPassage, name: '静脉通道', rate: venousPassage_rate },
          { value: externalChestCompression, name: '胸外按压', rate: externalChestCompression_rate }
        ]
        const timeLine = []
        const closedThoracicDrainage_list = []
        const artificialAirway_list = []
        const bloodTransfusion_list = []
        const injuryControlSurgery_list = []
        const useRespirator_list = []
        const venousPassage_list = []
        const externalChestCompression_list = []
        console.log(res.data)
        res.data.firstAidMeasureQties.forEach(el => {
          timeLine.push(el.year + '-' + el.month)
          closedThoracicDrainage_list.push(el.closedThoracicDrainage)
          artificialAirway_list.push(el.artificialAirway)
          bloodTransfusion_list.push(el.bloodTransfusion)
          injuryControlSurgery_list.push(el.injuryControlSurgery)
          useRespirator_list.push(el.useRespirator)
          venousPassage_list.push(el.venousPassage)
          externalChestCompression_list.push(el.externalChestCompression)
        })
        const option = {
          color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
          title: {
            text: '急救措施开展情况',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // orient: 'vertical',
            // right: 0,
            top: '20px',
            formatter: name => {
              const legendData = legendList.filter(item => {
                return item.name === name
              })
              return legendData[0].name + '：' + legendData[0].value + '例 ' + legendData[0].rate + '%'
            }
          },
          grid: {
            top: 60
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: timeLine
          },
          yAxis: {
            name: '次',
            type: 'value'
          },
          series: [{
            name: '胸腔闭式引流',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: closedThoracicDrainage_list
          }, {
            name: '人工气道',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: artificialAirway_list
          }, {
            name: '输血',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: bloodTransfusion_list
          }, {
            name: '损伤性控制手术',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: injuryControlSurgery_list
          }, {
            name: '呼吸机',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: useRespirator_list
          }, {
            name: '静脉通道',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: venousPassage_list
          },
          {
            name: '胸外按压',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: externalChestCompression_list
          }
          ]
        }
        myChart.setOption(option)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.trauma-process {
    width: 100%;
    height: 100%;

    &_content {
        height: calc(100% - 59px);
        overflow-y: auto;
    }

    .dignosis-content {
        width: 100%;
        height: 400px;
        display: inline-block;

        .dignosis-style {
            display: inline-block;
            width: 50%;
            height: 100%;
        }
    }

    .treatment-process-card {
        height: 400px;
    }

    .box-card+.box-card {
        margin-top: 5px;
    }

    /deep/.el-radio__label {
        line-height: 38px;
    }
}
</style>
